<template>
  <!-- 轮播图 -->
  <view class="uni-margin-wrap">
    <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
      <swiper-item>
        <view class="swiper-item uni-bg-red">
          <image style="width: 100%;height: 400rpx;" src="../../static/轮播1.jpg"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item uni-bg-green">
          <image style="width: 100%;height: 400rpx;" src="../../static/轮播2.jpg"></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item uni-bg-blue">
          <image style="width: 100%;height: 400rpx;" src="../../static/轮播3.jpg"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
  <!-- tabs标签页 -->
  <view class="tabs">
    <view class="tab_item" :class="{cur:index === tabCur}" v-for="(item, index) in tabs" :key="index"
      @tap="tabSelect(index)">{{ item.name }}</view>
  </view>
  <!-- 标签页对应的内容 -->
  <block v-if="tabCur === 0">
    <view v-for="(item,index) in list1" :key='index' class="goods">
      <image :src='item.image' @tap="goDetail"></image>
      <!-- ../../static/QQ.png -->
      <view class="goodinfo">
        <text>{{item.name}}</text>
        <br>
        <text class="text_small">{{item.point}}积分</text>
        <button @tap="buy(item.commodityId)">{{item.price}}元立即兑换</button>
      </view>
    </view>
  </block>
  <block v-else-if="tabCur === 1">
    <view v-for="(item,index) in list2" :key='index' class="goods">
      <image :src='item.image' @tap="goDetail"></image>
      <view class="goodinfo">
        <text>{{item.name}}</text>
        <br>
        <text class="text_small">{{item.point}}积分</text>
        <button @tap="buy(item.commodityId)">{{item.price}}元立即兑换</button>
      </view>
    </view>
  </block>
  <block v-else>
    <view v-for="(item,index) in list3" :key='index' class="goods">
      <image :src='item.image' @tap="goDetail"></image>
      <view class="goodinfo">
        <text>{{item.name}}</text>
        <br>
        <text class="text_small">{{item.point}}积分</text>
        <button @tap="buy(item.commodityId)">{{item.price}}元立即兑换</button>
      </view>
    </view>
  </block>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            id: 1,
            name: '电器'
          },
          {
            id: 2,
            name: '家居'
          },
          {
            id: 3,
            name: '手工'
          },
        ],
        tabCur: 0, // 当前tabs下标
        list1: [],
        list2: [],
        list3: [],
        // pointId:0,
        // categoryId
        // categoryName
        // commodityId
        // image
        // name
        // point
        // price
      }
    },
    onLoad() {
      const that = this
      uni.request({
        url: getApp().globalData.baseUrl + "/getAllCommodity",
        method: 'POST',
        data: {
          categoryId: 1,
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          console.log(res)
          that.list1 = res.data
        }
      })
      uni.request({
        url: getApp().globalData.baseUrl + "/getAllCommodity",
        method: 'POST',
        data: {
          categoryId: 2,
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          // console.log(res)
          that.list2 = res.data
        }
      })
      uni.request({
        url: getApp().globalData.baseUrl + "/getAllCommodity",
        method: 'POST',
        data: {
          categoryId: 3,
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          // console.log(res)
          that.list3 = res.data
        }
      })
    },
    methods: {
      // tab切换
      tabSelect(index) {
        if (this.tabCur === index) return
        this.tabCur = index
      },
      goDetail() {
        uni.navigateTo({
          url: "/pages/market/detail"
        })
      },
      buy(i) {
        uni.request({
          url: getApp().globalData.baseUrl + "/createOrder",
          method: 'POST',
          data: {
            userId: uni.getStorageSync("userId"),
            commodityId: i,
            quantity: 1,
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success(res) {
            // console.log(res)
            uni.showToast({
              title: '成功',
              icon: 'success',
              duration: 2000
            })
            // that.list3 = res.data
          }
        })
        // uni.navigateTo({
        //   url: '/pages/market/detail'
        // })
      }

    }
  }
</script>

<style lang="scss">
  /* 轮播图 */
  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
  }

  .swiper {
    height: 400rpx;
  }

  .swiper-item {
    display: block;
    height: 400rpx;
    line-height: 400rpx;
    text-align: center;
    border-radius: 5%;
  }

  .tabs {
    display: flex;
    justify-content: space-evenly;
    font-size: 32rpx;
    background-color: #FFF;
    color: #A9A9A9;
  }

  .tab_item {
    height: 114rpx;
    line-height: 100rpx;

    &.cur {
      position: relative;
      color: black;

      &::after {
        content: '';
        width: 36rpx;
        height: 6rpx;
        position: absolute;
        bottom: 20rpx;
        left: 50%;
        margin-left: -18rpx;
        background-color: #43a246;
      }
    }
  }

  .top {
    margin: 40rpx 20rpx 10rpx 20rpx;
    border: white 10rpx solid;
    border-radius: 10rpx;
    background-color: white;
  }

  .head,
  .price,
  .middle {
    display: flex;
    // justify-content: space-around;
    align-items: center;
  }

  .left {
    flex: 1;
    text-align: left;
  }

  .right {
    flex: 1;
    text-align: right;

  }

  /* 内容 */
  .text_small {
    font-size: 27rpx;
    word-break: break-all;
    color: #7a7878;
    margin-left: 320rpx;
    /* margin-bottom:100rpx; */
  }

  .goods {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 250rpx;
    background-color: rgb(241, 241, 241);
    margin: 15rpx;
  }

  .goods image {
    height: 220rpx;
    width: 220rpx;
    padding: 5rpx;
    margin: 5px;
  }

  .goods button {
    background-color: #99cc66;
    //  border: #99cc66 1px none;
    //outline: none;
    /*去除点击时的蓝色边框*/
    /* cursor:pointer; */
    height: 85rpx;
    width: 300rpx;
    /* padding:14px 20px; */
    padding: 10rpx;
    color: #FFFFFF;
    /* text-align: center; */
    font-size: unset;
    margin-top: 60rpx;
    text-align: center;

    margin-right: 10rpx;
  }

  .goodsinfo {
    width: 90px;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
  }

  // .middle {
  //   display: flex;
  //   justify-content: flex-start;
  // }
</style>